* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

.mr-5 {
    margin-right: 5px;
}

.ml-5 {
    margin-left: 5px;
}

.m-2 {
    margin: 2px;
}

.pd-10 {
    padding: 10px 0;
}


/*全局设置 header main footer*/
#app {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}

.el-container {
    height: 100vh;
}

.el-header {
    background-color: #3674B5;
    text-align: center;
    height: 20%;
}

.el-main {
    background-color: #f5f7fa;
    text-align: center;
}

.el-footer {
    background-color: #428675;
    color: #333;
    vertical-align: bottom;
    text-align: center;
}

/* 移动端日期选择器全局样式 */
@media screen and (max-width: 768px) {
    /* 确保日期选择器弹出层不超出屏幕 */
    body .el-picker-panel.el-date-picker.date-picker-mobile {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    /* 日期时间选择器特殊处理 */
    body .el-picker-panel.el-date-picker.has-time.date-picker-mobile {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    /* 修复日期选择器弹出层位置 */
    body .date-picker-mobile {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        transform: none !important;
        margin: 0 !important;
        border-radius: 8px 8px 0 0 !important;
        z-index: 2100 !important;
    }
    
    /* 隐藏弹出层箭头 */
    body .date-picker-mobile .popper__arrow {
        display: none !important;
    }
    
    /* 优化时间选择面板 */
    body .date-picker-mobile .el-time-panel {
        width: 100% !important;
        left: 0 !important;
    }
}

/* 电脑端日期选择器样式 - 确保不受移动端样式影响 */
@media screen and (min-width: 769px) {
    body .el-picker-panel.el-date-picker:not(.date-picker-mobile) {
        position: absolute;
        width: auto !important;
        max-width: none !important;
        transform: translateX(-50%) !important;
    }
    
    body .el-picker-panel.el-date-picker.has-time:not(.date-picker-mobile) {
        width: auto !important;
        max-width: none !important;
    }
}